<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="商户"
        >
          <a-select :disabled="isDisabled"
                    showSearch
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    v-decorator="[ 'merchantId', {rules: [{ required: true, message: '请选择。。。' }]} ]">
            <a-select-option v-for="item in merchantList" :key="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="跳转url"
        >
          <a-input placeholder="跳转url" v-decorator="[ 'transUrl', {rules: [{ required: true, message: '请输入。。。' }] }]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="图片展示时间"
        >
          <a-input placeholder="图片展示时间"
                   v-decorator="[ 'displayTime', {rules: [{ required: true, message: '请输入。。。' }] }]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
        >
          <a-input placeholder="排序" v-decorator="[ 'sort', {rules: [{ required: true, message: '请输入。。。' }] }]"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据源类型">
          <a-radio-group v-decorator="[ 'sourceType', {rules: [{ required: true, message: '请选择' }]}]">
            <a-radio :value="1">视频</a-radio>
            <a-radio :value="0">图片</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <a-radio-group v-decorator="[ 'status', {rules: [{ required: true, message: '请选择' }]}]">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="广告展示"
          class="atFormItem"
        >
          <a-upload name="file" :multiple="true" :fileList="itemFileList"
                    :action="this.$baseURL+'/common/upload/uploadFile'" @change="handleChange">
            <a-button>
              <a-icon type="upload"/>
              上传展示
            </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  // import { addOrUpdate, deleteFile } from '@/api/businessService/businessAdvertisement'
  import { selectAll } from '@/api/merchantService/merchant'
  import pick from 'lodash.pick'

  export default {
    //--############  data() ###############&ndash;&gt;
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        mdl: {},
        form: this.$form.createForm(this),

        isDisabled: false,
        merchantList: [],
        itemFileList: [],
        sourceUrlList: [],
        url: ''
      }
    },
    //--############  data() ###############&ndash;&gt;

    created() {

      selectAll().then(res => {
        this.merchantList = res.result
      })
    },

    //--############  methods() ###############&ndash;&gt;
    methods: {
      add() {
        this.isDisabled = false
        this.visible = true
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      edit(record) {
        this.itemFileList = []
        this.url = ''
        this.isDisabled = true
        this.mdl = Object.assign({}, record)
        this.visible = true
        this.url=record.sourceUrl
        this.itemFileList.push({ 'uid': '123', 'name': this.mdl.sourceUrl, 'url': this.mdl.sourceUrl })
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.mdl, 'merchantId', 'transUrl', 'displayTime', 'sourceType', 'sort', 'status'))
        })

      },
      close() {
        this.$emit('close')
        this.visible = false
        this.form.resetFields()
        this.mdl = {}
      },
      handleOk() {
        const _this = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          // 验证表单没错误
          if (!err) {
            values.id = this.mdl.id
            values.type = 1
            values.sourceUrl = _this.sourceUrlList.url
            if (values.id != null) {
              if(_this.sourceUrlList.url==null){
                values.sourceUrl = _this.url
              }
            }
            _this.confirmLoading = true
            // 模拟后端请求 2000 毫秒延迟
            addOrUpdate(values).then((res) => {
              if (res.code === 200) {
                _this.$message.success('保存成功')
                _this.$emit('ok')
                _this.close()
              } else {
                this.$notification.error({
                  message: '错误',
                  description: res.message,
                  duration: 4
                })
              }
            }).catch(() => {
              // Do something
            }).finally(() => {
              _this.confirmLoading = false
            })
          }
        })
      },
      handleCancel() {
        this.close()
      },
      handleChange(info) { //上传证书
        this.itemFileList = info.fileList
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
          this.itemFileList.pop()
          this.itemFileList.push(info.file)
          this.$message.success(`${info.file.name} 上传成功`)
          this.sourceUrlList = info.file.response


        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name}上传失败.`)
        } else if (info.file.status === 'removed') {
          deleteFile(info.file.response.name).then(res => {
            // console.log('---删除文件----')
          })
        }
      }
    }
    //--############  methods() ###############-->
  }
</script>

<style scoped>

</style>
